<template lang="">
  <div id="move">

    <div id="showCase">
      <router-view></router-view>
    </div>
    <div id="titleCase">
      <ul>
        <!-- <router-link active-class="movepublish" to="/MoveIndex/MovePublish" tag="li">
          <i></i>
          <p>啥都好说</p>
        </router-link> -->
        <router-link v-for="item in navcontent" ::key="item.pcontent" :to="item.linkto" tag="li" active-class="active">
          <img :src="[$route.path!==item.linkto?item.iurl:item.iurl2]">
          <p>{{item.pcontent}}</p>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
  import { v4 as uuidv4 } from 'uuid';
  uuidv4()


  export default {
    data() {
      return {
        navcontent: [
          {
            linkto: "/MoveIndex/MovePublish",
            pcontent: "发表",
            iurl: require("../assets/images/MovePublish.png"),
            iurl2: require("../assets/images/MovePublish1.png")
          },
          {

            linkto: "/MoveIndex/MoveArchive",
            pcontent: "文章",
            iurl: require("../assets/images/MoveArchive.png"),
            iurl2: require("../assets/images/MoveArchive1.png")
          },
          {
            linkto: "/MoveIndex/MoveTalk",
            pcontent: "说说",
            iurl: require("../assets/images/MoveTalk.png"),
            iurl2: require("../assets/images/MoveTalk1.png")
          },
          {
            linkto: "/MoveIndex/MoveTopic",
            pcontent: "主题",
            iurl: require("../assets/images/MoveTopic.png"),
            iurl2: require("../assets/images/MoveTopic1.png")
          },
          {
            linkto: "/MoveIndex/MoveAbout",
            pcontent: "我的",
            iurl: require("../assets/images/MoveAbout.png"),
            iurl2: require("../assets/images/MoveAbout1.png")
          },

        ]

      }
    },

    computed: {
      // changeimgurl(){
      //   return function(e){
      //     console.log(e)
      //     let ooo=this.$refs
      //     console.log(this.$route)
      //     return "hhh"
      //   }
      // }


    },
    created() {
      //   let bb = uuidv4()
      // console.log(bb)
      //   if (localStorage.getItem("userUuid") === null) {
      //     localStorage.setItem("userUuid", bb)
      //   }
      // }

    }
  }
</script>
<style scoped>
  #move {
    font-size: 8px;
    width: 100%;
    background-image: url("../assets/images/movebackimg.jpg");
    background-size: 100% 100%;

  }

  #showCase {
    width: 100%;
  }

  #titleCase {
    background-color: rgb(224, 218, 230);
    height: 3rem;
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  #titleCase>ul {
    text-align: center;
    display: flex;
    height: 100%;
  }

  #titleCase>ul>li {
    color: rgb(148, 142, 142);
    display: flex;
    width: 20%;
    height: 100%;
    font-size: 10px;
    flex-direction: column;
    align-items: center;

  }

  #titleCase>ul>.active {
    color: rgb(102, 169, 233);
    background-color: rgba(179, 172, 185, 0.329);
  }

  #titleCase>ul>li img {
    width: 2rem;
    height: 2rem;
  }

  #titleCase>ul>li i {
    width: 2rem;
    height: 2rem;
  }
  
</style>